<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网易云音乐</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript">
		// 存放当前播放音乐的数组 存放格式：[音乐 所属歌单 歌单中的位置]
		var musicPlaying = [];
		musicPlaying[0] = document.createElement("audio");

		// 计算时间
	function getTime(time) {
    var m = Math.floor(time % 3600 / 60);
    m = m<=9? "0"+m:m;
    var s = Math.floor(time % 3600 % 60);
    s = s<=9? "0"+s:s;
    return m +":" + s;
  }
	</script>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/show.js"></script>
	<script type="text/javascript" src="js/song-list.js"></script>
	<script type="text/javascript" src="js/music-control.js"></script>
</head>
<body>
	<!-- 新建歌单模态框 -->
	<div class="create-newlist">
		<div class="create-newlist-title">新建歌单</div>
		<div class="create-newlist-name">
			歌单名&nbsp;:&nbsp;
			<input type="text" name="">
		</div>
		<div class="create-newlist-surebutton">
			新建
		</div>
		<div class="create-newlist-cancelbutton">
			取消
		</div>
	</div>
	<!-- 头部导航栏 -->
	<nav>
		<div class="top">
			<div class="cloudmusic-logo fl"></div>
			<div class="nav fl">
				<ul>
					<li>发现音乐 <i></i></li>
					<li>我的音乐 <i></i></li>
					<li>朋友 <i></i></li>
					<li>商城 <i></i></li>
					<li>音乐人 <i></i></li>
					<li>下载客户端 <i></i></li>
				</ul>
			</div>
			<div class="music-search fl">
				<input type="search" name="" placeholder="音乐/电台/视频/用户">
				<span></span>
			</div>
			<div class="creator-center fl">创作者中心</div>
			<div class="user-center fl">
				<a href="#" title="">
					<img src="upload/user-pic.jpg" alt="">
				</a>
				<span></span>
			</div>
		</div>
	</nav>
	<!-- 主体部分 -->
	<div class="main">
		<!-- 歌单列表部分 -->
		<div class="song-list">
				<div class="mySinger">
					我的歌手(31)
				</div>
				<div class="myBroadcast">
					我的电台(1)
				</div>
				<div class="create-list">
					<span class="triangle-right"></span><span class="triangle-down"></span>创建的歌单(<span class="number">0</span>)&nbsp;&nbsp;&nbsp;&nbsp;<a href="JavaScript:;" title="" class="fr"><i></i>新建</a>
				</div>
				<ul class="create-list-content">
					<!-- <li>
						<div class="album-cover fl">
							
						</div>
						<div class="album-message fl">
							<p class="album-title">我最喜欢的音乐</p>
							<p class="album-song-number">0首</p>	
						</div>	
					</li> -->
				</ul>
				<div class="collect-list">
					<span class="triangle-right"></span><span class="triangle-down"></span>收藏的歌单(0)
				</div>
			</ul>
		</div>
		<!-- 歌单信息操作部分 -->
		<div class="album-control">
			<div class="album-control-cover fl">
				<img src="upload/user-pic.jpg" alt="">
			</div>
			<div class="album-control-name fl">
				<i class="fl"></i>
				<span>我喜欢的音乐</span>
			</div>
			<div class="album-control-message fl">
				<div class="user-image fl">
					<img src="upload/user-pic.jpg" alt="">
				</div>
				<div class="user-id fl">
					<a href="#" title="">Bruce Chen</a>
				</div>
				<div class="create-time fl">
					<span class="time">2019-10-03</span>
					创建
				</div>
			</div>
			<input type="file" name="" class="uploadMusic">
			<div class="album-control-songlist">
					<h3 class="fl">歌曲列表</h3>
					<span>0首歌</span>
					<span class="fr">播放:<i>60</i>次</span>
			</div>
		</div>
		<!-- 歌曲列表部分 -->
		<div class="music-list">
			<div class="music-list-title">
				<ul>
					<li></li>
					<li>歌曲标题</li>
					<li>时长</li>
					<li>操作</li>
					<li>专辑</li>
				</ul>
			</div>
			<div class="music-list-ui">
				<ul class="music-list-option">
					<!-- <li>
						<audio src=""></audio>
						<span class="song-number fl">1</span>
						<i class="little-player-button fl"></i>
						<span class="music-name">Eye of the tigerdsdawddadad</span>
						<span class="music-duration">00:1231</span>
						<span class="singer-name">2323</span>
						<span class="album-name">1111</span>
						<a href="JavaScript:;" class='delete-key'>删除</a>
					</li> -->
				</ul>
			</div>
		</div>
	</div>
	<!-- 播放控制器 -->
	<div class="music-control">
		<a class="controlKey pre-choose"></a>
		<a class="controlKey player-control play-click"></a>
		<a class="controlKey next-choose"></a>
		<a class="album-cover-min"></a>
		<a class="currentPlayMusicTitle"></a>
		<div class="progressBar">
			<div class="play-btn">
				<img src="img/ply_btn.png" alt="">
			</div>
		</div>
		<div class="playTimeInfo">
			<span class="currentPlayMusicTime">00:00</span> / <span class="totalPlayMusicTime">00:00</span>
		</div>
	</div>
</body>
</html>